<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 组件化应用构建</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <ul>
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ul>
    </div>
</body>

<script type="text/javascript">
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个"prop"，类似于一个自定义特性。这个 prop 名为 todo。
        props: ['todo'],
        // Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令
        // Mustache 错误写法 '<li id="{{ todo.id }}">{{ todo.text }}</li>' 错误写法、错误写法
        template: '<li v-bind:id="\'list-\' + todo.id">{{ todo.text }}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data: {
            groceryList: [
                {
                    id: 0,
                    text: '蔬菜'
                },
                {
                    id: 1,
                    text: '奶酪'
                },
                {
                    id: 2,
                    text: '随便其它什么人吃的东西'
                }
            ]
        },
    })
</script>

</html>